<template>
	<div>
		<toMenu>
			<el-button type="primarylist" size="mini" @click="openproductmanager">添加</el-button>
		</toMenu>
		<el-table :data="productlist" style="width: 100%">
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="productName" label="产品名称">
			</el-table-column>
			<el-table-column prop="unit" label="单位">
			</el-table-column>
			<el-table-column prop="unitPrice" label="单位">
			</el-table-column>
			<el-table-column prop="nums" label="个数">
			</el-table-column>
			<el-table-column prop="totalPrice" label="总价格">
			</el-table-column>
			<el-table-column prop="cid" label="分类id">
			</el-table-column>



			</el-table-column>
			<el-table-column width="150" align="center" label="操作">
				<template v-slot="scopt">
					<el-button type="primary" size="mini" @click="openeditorproduct(scopt.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="delproduct(scopt.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="productcount" @current-change="getproductlist">
		</el-pagination>

		<el-dialog title="添加管理员" :visible.sync="addproductvisible" width="40%">
			<el-form :model="product" label-width="80px" ref="addformdom">
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入产品名称', trigger: 'blur' }]">
					<el-input v-model="product.productName" placeholder="请输入产品名称"></el-input>
				</el-form-item>
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入单位', trigger: 'blur' }]">
					<el-input v-model="product.unit" placeholder="请输入单位"></el-input>

				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入单位', trigger: 'blur' }]">
					<el-input v-model.number="product.unitPrice" placeholder="请输入单位"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入个数', trigger: 'blur' }]">
					<el-input v-model.number="product.nums" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model.number="product.totalPrice" placeholder="请输入总个数"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model.number="product.cid" placeholder="请输入分类id"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addproductvisible = false">取 消</el-button>
				<el-button type="primary" @click="addproduct( 'addformdom')">确 定</el-button>

			</span>
		</el-dialog>









		<el-dialog title="修改管理员" :visible.sync="editorproductvisible" width="40%">
			<el-form :model="eproduct" label-width="80px" ref="editorformdom">
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入产品名称', trigger: 'blur' }]">
					<el-input v-model="eproduct.productName" placeholder="请输入产品名称"></el-input>
				</el-form-item>
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入单位', trigger: 'blur' }]">
					<el-input v-model="eproduct.unit" placeholder="请输入单位"></el-input>
				
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入单位', trigger: 'blur' }]">
					<el-input v-model.number="eproduct.unitPrice" placeholder="请输入单位"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入个数', trigger: 'blur' }]">
					<el-input v-model.number="eproduct.nums" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model.number="eproduct.totalPrice" placeholder="请输入总个数"></el-input>
				</el-form-item>
				<el-form-item label="编号" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model.number="eproduct.cid" placeholder="请输入分类id"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editorproductvisible = false">取 消</el-button>
				<el-button type="primary" @click="editoreproduct( 'editorformdom')">确 定</el-button>

			</span>
		</el-dialog>
	</div>

</template>
















<script>
	import toMenu from "../../components/tomenu.vue"
	export default {
		name: "manager",
		components: {
			toMenu
		},
		data() {
			return {
				productlist: [],
				productcount: 0,
				addproductvisible: false,
				editorproductvisible: false,
				product: {
					productName: "",
					unit: "",
					unitPrice: "",
					nums: "",
					totalPrice: "",
					cid: ""

				},
				eproduct: {
					id:"",
					productName: "",
					unit: "",
					unitPrice: "",
					nums: "",
					totalPrice: "",
					cid: ""
				}
			}
		},
		mounted() {
			this.getproductlist(1);
		},
		methods: {

			openproductmanager() {
				this.addproductvisible = true
			},
			openeditorproduct(getdata) {
				console.log(getdata);
				this.eproduct = getdata;
				this.editorproductvisible = true
			},

			editoreproduct(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'patch',
							url: '/api/v1/productUpdate',
							data: {
								"ProductName": _this.product.productName,
								"Unit": _this.product.unit,
								"UnitPrice": _this.product.unitPrice,
								"Nums": _this.product.nums,
								"TotalPrice": _this.product.totalPrice,
								"Cid": _this.product.cid
							}, 
							data:_this.eproduct
						}).then(function(res){
							console.log(res)
							if(res.data.code==201){
								_this.$message({
									message:res.data.info,
									type:"error",
									duration:1500
								})
							}else{
								_this.$message({
									message:res.data.info,
									type:"success",
									duration:1000,
									onClose:function(){
									_this.editorproductvisible=false
									_this.getproductlist(1)
										
									}
								})
							}
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: 'error',
							duction: 1500
						})
					}
				});
			},

			delproduct(id) {
				var _this = this;
				_this.$http({
					url: "/api/v1/productDel",
					method: "delete",
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					params: {
						id: id
					}
				}).then(function(res) {
					if (res.data.code == 201) {
						_this.$message({
							message: res.data.info,
							type: "error",
							duration: 1500
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: "success",
							duration: 1000,
							onClose: function() {
								_this.getproductlist(1);
								_this.addproductvisible = false
							}
						})
					}
				})
			},
			addproduct(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'post',
							url: '/api/v1/productAdd',
							data: {
								"info": {
									"ProductName": _this.product.productName,
									"Unit": _this.product.unit,
									"UnitPrice": _this.product.unitPrice,
									"Nums": _this.product.nums,
									"TotalPrice": _this.product.totalPrice,
									"Cid": _this.product.cid
								}
							}
						}).then(function(res) {
							//console.log(res)
							if (res.data.code == 201) {
								_this.$message({
									message: res.data.info,
									type: "error",
									duration: 1500
								})
							} else {
								_this.$message({
									message: res.data.info,
									type: "success",
									duration: 1000,
									onClose: function() {
										_this.getproductlist(1);
										_this.addproductvisible = false
									}
								})
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getproductlist(getpage) {
				var _this = this;

				_this.$http.get('/api/v1/productList', {
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					params: {
						page: getpage,
						pageSize: 10
					}
				}).then(function(res) {
					console.log(res);
					if (res.data.code == 200) {
						_this.productlist = res.data.data.productList
						_this.productcount = res.data.data.count
					}
				})
			}
		}
	}
</script>

<style>
</style>
